Ext.onReady(function() {

	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	function change(val) {
		if (val > 0) {
			return '<span style="color:green;">' + val + '</span>';
		} else if (val < 0) {
			return '<span style="color:red;">' + val + '</span>';
		}
		return val;
	}

	function pctChange(val) {
		if (val > 0) {
			return '<span style="color:green;">' + val + '%</span>';
		} else if (val < 0) {
			return '<span style="color:red;">' + val + '%</span>';
		}
		return val;
	}

	// indexOfId: id 必须存在 否则返回-1
	var fields = ['sysId', 'company', 'price', 'change', 'pctChange', {
				name		: 'lastChange',
				type		: 'date', // required!
				dateFormat	: 'timestamp'
			}];

	var proxy = new Ext.data.HttpProxy({
				url	: 'data.json'/*,
				api	: {
				read	: 'data.json',
				create	: 'data.json/create',
				update	: 'data.json/update',
				destroy	: 'data.json/destroy'
				}*/
			});

	var reader = new Ext.data.JsonReader({
				successProperty	: 'success',
				idProperty		: 'sysId',
				root			: 'data',
				fields			: fields
			});

	// create the data store
	var store = new Ext.data.Store({
				proxy		: proxy,
				reader		: reader,
				autoLoad	: true,
				writer		: new Ext.data.JsonWriter({
							encode			: true,
							writeAllFields	: false
						})
			});

	store.on({
				'add'		: onAdd,
				'update'	: onUpdate,
				'remove'	: onRemove
			});

	function onAdd(_this, rec, idx) {
		Ext.Ajax.request({
					params	: {
						id	: rec[0].data.id
					},
					url		: 'addAction.do',
					scripts	: true,
					success	: function(response, options) {
						var msg = response.responseText;
						var obj = Ext.decode(msg);
						if (obj && obj.success) {
							_this.commitChanges();
							showMsg(true, msg);
						} else {
							_this.remove(rec);
							showMsg(false, msg);
						}
					},
					failure	: function(response, options) {
						var msg = response.responseText;
						_this.remove(rec);
						showMsg(false, msg);
					}
				});
	}

	function onUpdate(_this, rec, op) {
		if (op == Ext.data.Record.EDIT) {
			Ext.Ajax.request({
						params	: {
							id	: rec.data.id
						},
						url		: 'updateAction.do',
						scripts	: true,
						success	: function(response, options) {
							var msg = response.responseText;
							var obj = Ext.decode(msg);
							if (obj && obj.success) {
								_this.commitChanges();
								showMsg(true, msg);
							} else {
								_this.rejectChanges();
								showMsg(false, msg);
							}
						},
						failure	: function(response, options) {
							var msg = response.responseText;
							_this.rejectChanges();
							showMsg(false, msg);
						}
					});
		}
	}

	function onRemove(_this, rec, idx) {
		showMsg(true);
	}

	function showMsg(isSucess, msg) {
		if (isSucess)
			new Ext.ux.Notification({
						iconCls	: 'icon-info',
						title	: '信息',
						html	: msg || '操作成功.'
					}).show(document);
		else
			new Ext.ux.Notification({
						iconCls	: 'icon-error',
						title	: '错误',
						html	: msg || '操作失败.'
					}).show(document);
	}

	var colModel = new Ext.grid.ColumnModel({
				defaults	: {
					sortable		: true,
					menuDisabled	: true
				},
				columns		: [{
							header		: 'SYSID',
							sortable	: true,
							dataIndex	: 'sysId'
						}, {
							id			: 'company',
							header		: 'Company',
							width		: 160,
							dataIndex	: 'company',
							editor		: new Ext.form.TextField()
						}, {
							header		: 'Price',
							width		: 75,
							renderer	: 'usMoney',
							dataIndex	: 'price',
							editor		: new Ext.form.NumberField()
						}, {
							header		: 'Change',
							width		: 75,
							renderer	: change,
							dataIndex	: 'change',
							editor		: new Ext.form.NumberField()
						}, {
							header		: '% Change',
							width		: 75,
							renderer	: pctChange,
							dataIndex	: 'pctChange',
							editor		: new Ext.form.NumberField()
						}, {
							header		: 'Last Updated',
							width		: 85,
							renderer	: Ext.util.Format.dateRenderer('m/d/Y'),
							dataIndex	: 'lastChange'
						}]
			}
	);

	var grid = new Ext.grid.GridPanel({
		// sm : new Ext.grid.RowSelectionModel(),
		store				: store,
		// enableDragDrop : true,
		bbar				: new Ext.PagingToolbar({
					store		: store,
					displayInfo	: true,
					pageSize	: 35
				}),
		colModel			: colModel,
		stripeRows			: true,
		autoExpandColumn	: 'company',
		height				: 500,
		width				: 800, // will effect stateful work, so config the option.
		stateful			: true,
		stateId				: 'stateful-grid',
		viewConfig			: {
			forceFit	: true
		},
		renderTo			: Ext.getBody(),
		tbar				: [{
					text	: '总计(Price)',
					handler	: function() {
						var total = store.sum('price');
						this.setText(total);
					}
				}, {
					text	: '索引',
					handler	: function() {
						var rec = grid.getSelectionModel().getSelected();
						if (rec) {
							var idx = store.indexOfId(rec.data.sysId);// 根据记录sysId 返回记录的索引值 否则返回-1
							store.find('company', 'Merck & Co., Inc.');// 根据指定属性查找匹配的记录, 并返回匹配的第一个记录的索引值 否则返回-1
							this.setText('索引_' + idx);
						}
					}
				}, {
					text	: '过滤(Inc.)',
					handler	: function() {
						store.filter('company', 'Inc.', true, false);// 根据指定属性过滤记录
					}
				}, '->', {
					text	: '插入记录',
					handler	: function() {
						var data = {};
						var len = fields.length;
						Ext.each(fields, function(field, idx) {
							if (Ext.isObject(field) && field['type'] == 'date') {
								data[field['name']] = new Date()
										.format('m/d/Y');
								return;
							}

							data[field] = '';
						}
						);

						var rec = new store.recordType(data);
						store.insert(0, rec);
					}
				}, {
					text	: '插入记录(表单)',
					handler	: function() {
						win.show();
					}
				}, {
					text	: '删除记录',
					handler	: function() {
						var recs = grid.getSelectionModel().getSelections();
						for (var i = 0; i < recs.length; i++) {
							store.remove(recs[i]);
						}
					}
				}, {
					text	: 'Dirty Records',
					handler	: function() {
						var recs = store.getModifiedRecords();
						console.log(recs.length);
					}
				}]
	}
	);

	/*new Ext.dd.DropTarget(grid.container, {
				ddGroup		: 'GridDD',
				copy		: false,
				notifyDrop	: function(dd, e, data) {
					var rows = data.selections;
					var index = dd.getDragData(e).rowIndex;
					if (typeof(index) == "undefined") {
						return;
					}

					for (i = 0; i < rows.length; i++) {
						var rowData = rows[i];
						if (!this.copy)
							store.remove(rowData);
						store.insert(index, rowData);
					}
				}
			});

	grid.on('dblclick', function() {
				var rec = grid.getSelectionModel().getSelected();
				form.loadRecord(rec);
				win.show();
			});*/

	var fp = new Ext.FormPanel({
				frame		: true,
				labelAlign	: 'top',
				width		: 600,
				bodyStyle	: 'padding:0 0 0 10px;',
				items		: [{
							layout	: 'column',
							items	: [{
										columnWidth	: .5,
										layout		: 'form',
										items		: [{
													xtype		: 'textfield',
													fieldLabel	: 'company',
													name		: 'company',
													anchor		: '95%'
												}, {
													xtype		: 'numberfield',
													fieldLabel	: 'Change',
													name		: 'change',
													anchor		: '95%'
												}, {
													xtype		: 'datefield',
													fieldLabel	: 'Last Change',
													name		: 'lastChange',
													value		: new Date(),
													anchor		: '95%'
												}]
									}, {
										columnWidth	: .5,
										layout		: 'form',
										items		: [{
													xtype		: 'numberfield',
													fieldLabel	: 'Price',
													name		: 'price',
													anchor		: '95%'
												}, {
													xtype		: 'numberfield',
													fieldLabel	: '% Change',
													name		: 'pctChange',
													anchor		: '95%'
												}, {
													xtype	: 'hidden',
													name	: 'sysId'
												}]
									}]
						}]
			}
	);

	var form = fp.getForm();

	var win = new Ext.Window({
				title			: 'Basic Form',
				modal			: true,
				border			: false,
				shadow			: false,
				resizable		: false,
				autoScroll		: true, // 自适应滚动条:子容器维度大于窗口
				closeAction		: 'hide',
				constrainHeader	: true,
				items			: fp,
				fbar			: [{
							text	: 'Save',
							handler	: function() {
								var rec = grid.getSelectionModel()
										.getSelected();
								if (undefined == rec) {
									var data = form.getValues();
									// data['sysId'] = 'rec_'+ (store.getCount() + 1);
									var rec = new store.recordType(data);
									store.insert(0, rec);
								} else {
									form.updateRecord(rec);
								}

								win.hide();
							}
						}, {
							text	: 'Cancel',
							handler	: function() {
								win.hide();
							}
						}]
			});

}
);